<template>
  <div class="editor-box">
    <h3>群名列表</h3>
    <div class="grouplist">
      <ul>
        <li v-for="(group, index) in groupNameWhiteList" :key="index">
          <input v-model="groupNameWhiteList[index]" />
          <van-button type="danger" @click="removeGroup(index)">删除</van-button>
        </li>
      </ul>
    </div>
    <div>


      <van-field v-model="newGroup" label="新群名" placeholder="请输入新群名" />
      <van-button type="primary" @click="addGroup">添加群名</van-button>

      <div class="save-btn">
        <van-button round block type="info" @click="saveComposeYml">保存</van-button>
      </div>

    </div>

  </div>
</template>

<script>
import { showSuccessToast, showFailToast } from 'vant';
import api from '../api'; // 确保路径正确

export default {
  name: 'ComposeEditor',
  data() {
    return {
      groupNameWhiteList: [],
      newGroup: '',
    };
  },
  mounted() {
    this.getComposeYml();
  },
  methods: {
    async getComposeYml() {

      try {
        const response = await api.get('api/get-compose-yml');
        const data = response.data.content;

        // 解析 docker-compose.yml 内容并提取 GROUP_NAME_WHITE_LIST 数组
        const match = data.match(/GROUP_NAME_WHITE_LIST:\s*'(\[.*?\])'/s);

        if (match && match[1]) {
          let listString = match[1];
          listString = listString.slice(1, -1); // 去掉开头和结尾的方括号
          let items = listString.split(/,\s*(?![^[]*\])/); // 使用正则表达式进行分割，避免逗号导致的错误分割
          items = items.map(item => item.trim().replace(/(^["']|["']$)/g, '')); // 去掉每个项开头和结尾的引号
          this.groupNameWhiteList = items;
        }

      } catch (error) {
        console.error(error);
        showFailToast('Failed to load compose file');
      }
    },
    async saveComposeYml() {
      try {
        // 获取当前 docker-compose.yml 内容
        const response = await api.get('api/get-compose-yml');
        let composeContent = response.data.content;

        // 更新 docker-compose.yml 中的 GROUP_NAME_WHITE_LIST 数组
        const updatedContent = composeContent.replace(
          /GROUP_NAME_WHITE_LIST:\s*'(\[.*?\])'/s,
          `GROUP_NAME_WHITE_LIST: '${JSON.stringify(this.groupNameWhiteList)}'`
        );

        const saveResponse = await api.post('api/save-compose-yml', {
          content: updatedContent,
        });
        if (saveResponse.status === 200) {
          showSuccessToast('Compose file saved');
        } else {
          showFailToast('Failed to save compose file');
        }
      } catch (error) {
        console.error(error);
        showFailToast('Failed to save compose file');
      }
    },
    addGroup() {
      if (this.newGroup) {
        this.groupNameWhiteList.push(this.newGroup);
        this.newGroup = '';
      }
    },
    removeGroup(index) {
      this.groupNameWhiteList.splice(index, 1);
    },
  },
};
</script>
<style scoped>
:root:root {
  --van-cell-background: var(black);
}

.grouplist {
  max-height: 60vh;
  overflow-y: auto;
}

.grouplist ul {
  list-style-type: none;

  padding-right: 40px;
  padding-left: 40px;
}

.grouplist li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.grouplist li input {
  flex-grow: 1;
  margin-right: 10px;
}

.save-btn {
  padding-bottom: 40px;
}
</style>
